<template>
	<view class="content">
		<view class="header">
			<view class="search-mar" @click="toSearch">
							<u-search  :showAction='false' placeholder="搜索食谱教材" v-model="ipt1"></u-search>
			</view>
		</view>
		<view class="swi">
			<view class="swi-box">
				<swiper style="height: 800rpx;" :indicator-dots="true" :autoplay="false" :interval="3000"
					:duration="800" :circular="true" indicatorActiveColor="gold">
					<swiper-item class="swi-item" v-for="(item,index) in shopList">
						<view class="swiper-item">
							<view class="swi-img">
								<img :src="item.img" alt="">
							</view>
						</view>
						<view class="swi-con">
							<view class="con-item">
								<view class="item-name">
									{{item.shopName}}
								</view>
								<view class="item-title">
									{{item.title}}
								</view>
								<view class="item-ts">
									<text
										style="font-size: 20rpx;color: #bbb;margin-right: 15rpx;">烹饪时间：{{item.time}}分钟</text>
									<text style="font-size: 20rpx;color: #bbb;">所需食材：{{item.shicai}}种</text>
								</view>
								<view class="item-last">
									<view class="last1">
										教程难度：
										<u-rate size="12" gutter="2" inactiveColor="#fff" activeColor="gold"
											:value="item.nandu" readonly></u-rate>
									</view>
									<view class="last2">
										<view class="last-item1">
											<u-icon name="heart" color="#bbb" size="20"></u-icon>{{item.zan}}
										</view>
										<view class="last-item1">
											<u-icon name="eye" color="#bbb" size="20"></u-icon>{{item.kan}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="swi-jgg">
				<scroll-view class="scroll" scroll-x="true">
					<view @click="toJgg(item,index)" class="scr-item" v-for="(item,index) in jgg">
						<view class="item-icon">
							<img :src="item.img" alt="">
						</view>
						<view style="width: 100%;text-align: center;margin-top: 10rpx;">
							<text style="">{{item.name}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="shop-con">
			<view class="shop-mar">
				<view class="shop-baodian">
					<view class="bd-header">
						<text style="padding: 7rpx;background-color: gold;border-radius: 50rpx;"></text>
						<text style="font-size: 36rpx;font-weight: bold;margin-left: 10rpx;">厨房宝典</text>
					</view>
					<scroll-view scroll-x class="bd-con">
						<view :class="item.color=='#F6774A'?'bd-item':(item.color=='#F8C56C'?'bd-item2':'bd-item3')" v-for="(item,index) in bdList">
							<view class="block-box">
								<view class="bditem-font">
									<text style="display: block;font-size: 40rpx;">{{item.name}}</text>
									<text style="font-size: 23rpx;">{{item.title}}</text>
								</view>
									<view class="bdicon-box">
										<img class="bdicon" :src="item.icon" alt="">
									</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="tuijian">
					<view class="bd-header">
						<text style="padding: 7rpx;background-color: gold;border-radius: 50rpx;"></text>
						<text style="font-size: 36rpx;font-weight: bold;margin-left: 10rpx;">热门推荐</text>
					</view>
					<view class="tj-con">
						<view class="tj-item" @click="toDetail(item)" v-for="(item,index) in shopList">
							<view class="tj-img">
								<img :src="item.img" alt="">
							</view>
							<view class="tj-title">
								<view class="title-name">
									{{item.shopName}}
								</view>
								<view class="title-user">
									<view class="tj-usermsg">
										<view class="user-img">
											<u-avatar size="20" src='https://t7.baidu.com/it/u=2291349828,4144427007&fm=193&f=GIF'></u-avatar>
										</view>
										<view class="user-name">
											{{item.user}}
										</view>
									</view>
									<view class="user-kan">
										<u-icon name="eye" color="#bbb" size="20"></u-icon>{{item.kan}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getceshiDjm
	} from '../../../utils/api.js'
	export default {
		data() {
			return {
				shopList: [],
				ipt1: '',
				jgg: [
					{id: 1,
						name: '速食锅',
						img:'../../../static/icon/djm/dianciguo.png'
					},
					{
						id: 2,
						name: '家常锅',
						img:'../../../static/icon/djm/guo1.png'
					},
					{
						id: 3,
						name: '早餐锅',
						img:'../../../static/icon/djm/guo3.png'
					},
					{
						id: 4,
						name: '药膳锅',
						img:'../../../static/icon/djm/guo4.png'
					},
					{
						id: 5,
						name: '美味锅',
						img:'../../../static/icon/djm/huoguo.png'
					},
					{
						id: 6,
						name: '健康锅',
						img:'../../../static/icon/djm/huoguo_1.png'
					},
				],
				bdList:[
					{id:1,name:'做饭技巧',title:'厨房小白必看',icon:"../../../static/icon/djm/boshimaobeifen.png",color:'#F6774A'},
					{id:2,name:'厨房用具',title:'厨房好物推荐',icon:'../../../static/icon/djm/canyin.png',color:'#F8C56C'},
					{id:3,name:'专属导师',title:'教你成大厨',icon:"../../../static/icon/djm/jiaoshi.png",color:'#62A4FB'}
				],
			};
		},
		onLoad() {
			getceshiDjm().then((res) => {
				this.shopList = res.data
			})
		},
		methods: {
			toJgg(item,index){
			
				uni.navigateTo({
					url:`/pages/tabbar-1-detail/tabbar-1-index/tabbar-1-index?name=${item.name}`
				})
			},
			toSearch(){
				uni.navigateTo({
					url:'/pages/tabbar-1-detail/tabbar-1-search/tabbar-1-search'
				})
			},
			toDetail(item){
				uni.navigateTo({
					url:`/pages/tabbar-1-detail/tabbar-1-shopDetail/tabbar-1-shopDetail?id=${item.id}`
				})
			}
		}
	};
</script>

<style>
	.content {
		width: 100%;
		background-color: #F5F5F5;
	}

	.header {
		width: 100%;
		margin: 0 auto;
		padding: 20rpx 0;
		background-color: #fff;
	}

	.swi {
		width: 100%;
		background-color: #fff;
		padding-bottom: 20rpx;
	}

	.swiper-item {
		width: 100%;
	}

	.swi-img {
		width: 100%;
	}

	.swi-img img {
		width: 100%;
		object-fit: contain;
	}

	.swi-item {
		width: 100%;

	}

	.swi-con {
		width: 90%;
		margin: 0 auto;
		border-radius: 20rpx;
		box-shadow: 1rpx 1rpx 15rpx 1rpx rgba(185, 185, 185, 0.5);
		padding: 30rpx 0;
		position: absolute;
		top: 60%;
		left: 50%;
		transform: translate(-50%, -10%);
		background-color: #fff;
	}

	.con-item {
		width: 70%;
		margin: 0 auto;
	}

	.item-name {
		font-size: 38rpx;
	}

	.item-title {
		margin-top: 10rpx;
	}

	.item-ts {
		margin-top: 20rpx;
	}

	.item-last {
		width: 100%;
		display: flex;
		margin-top: 10rpx;
	}

	.last1 {
		display: flex;
		font-size: 20rpx;
		color: #bbb;
	}

	.last2 {
		display: flex;
		font-size: 20rpx;
		color: #bbb;
	}

	.last-item1 {
		display: flex;
		font-size: 20rpx;
		color: #bbb;
		margin-right: 20rpx;
	}

	.swi-jgg {
		width: 100%;
		padding: 20rpx 0;
	}

	.scroll {
		width: 100%;
		display: flex;
		white-space: nowrap;
		overflow: hidden;
		/* justify-content: space-between; */
	}

	.scr-item {
		display: inline-block;
		margin: 0 35rpx;
		width: 100rpx;
	}
	.item-icon{
		width: 90%;
		height: 110rpx;
		background-color: gold;
		border-radius: 60rpx;
		padding: 10rpx;
	}
	.item-icon img{
		width: 70%;
		position: relative;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	.shop-con{
		width: 100%;
		background-color: #fff;
		margin-top: 40rpx;
		padding: 20rpx 0;
	}
	.shop-mar{
		width: 95%;
		margin: 0 auto;
	}
	.shop-baodian{
		width: 100%;
	}
	.bd-header{
		width: 100%;
		padding: 20rpx 0;
	}
	.bd-con{
		display: flex;
		white-space: nowrap;
		width: 100%;
	}
	.bd-item{
		padding: 20rpx;
		background-color: #F6774A;
		border-radius: 30rpx;
		display: inline-block;
		margin-right: 20rpx;
		overflow: hidden;
	}
	.bd-item2{
		padding: 20rpx;
		background-color: #F8C56C;
		border-radius: 30rpx;
		display: inline-block;
		margin-right: 20rpx;
		overflow: hidden;
	}
	.bd-item3{
		padding: 20rpx;
		background-color: #62A4FB;
		border-radius: 30rpx;
		display: inline-block;
		margin-right: 20rpx;
		overflow: hidden;
	}
	.bditem-font{
		flex: 1;
		padding: 10rpx 20rpx;
		color: #fff;
	}
	.block-box{
		width: 100%;
		display: flex;
		overflow: hidden;
		padding: 10rpx;
	}
	.bditem-icon{	
		flex: 1;
	}
	.bdicon-box{
		flex: 1;
	}
	.bdicon{
		width:150rpx;
	}
	.tuijian{
		width: 100%;
	}
	.tj-con{
		width: 100%;
		 column-count: 2;
		 column-gap: 0rpx;
	}
	.tj-item{
		display: flex;
		flex-wrap: wrap;
		margin: 10rpx;
		border-radius: 30rpx;
		overflow: hidden;
		counter-increment: item-counter;
		box-shadow: 1rpx 1rpx 15rpx 1rpx rgba(185, 185, 185, 0.5);
	}
	.tj-img{
		width: 100%;
	}
	.tj-img img{
		width: 100%;
	}
	.tj-title{
		width: 90%;
		margin: 0 auto;
	}
	.title-user{
		width: 100%;
		display: flex;
		padding: 20rpx 0;
	}
	.tj-usermsg{
		flex: 1;
		display: flex;
	}
	.title-name{
		font-weight: bold;
		font-size: 36rpx;
	}
	.user-name{
		font-size: 26rpx;
		color: #999999;
		text-indent: 8rpx;
	}
	.user-kan{
		display: flex;
		font-size: 28rpx;
		color: #999999;
	}
	.search-mar{
		width: 95%;
		margin: 0 auto;
	}
</style>
